<template>
  <div class="songSheet">
    <!-- <div class="songTop">
        <div class="sel"><van-checkbox v-if="manage" @click="SelectAll" v-model="selectAll">全选</van-checkbox></div>
        <div class="btns">
            <div v-if="manage" class="btn">删除</div>
            <div><van-button @click="manage = !manage" type="primary" size="mini">{{ manage?"取消":"管理" }}</van-button></div>
        </div>
    </div> -->
    <div class="songList">
        <div v-for="(item,index) in list" :key="index" @click="jump(item)" class="item">
            <div class="checkbox">
                <van-checkbox v-if="manage" v-model="item.isSelect"></van-checkbox>
            </div>
            <img :src="item.pic">
            <div class="content">
                <div class="left">
                    <div>{{ item.name }}</div>
                    <div>{{ item.songNum }}首</div>
                </div>
                <div class="right">
                    <van-icon @click.stop="del(item)" name="delete-o" />
                    <van-icon @click.stop="edit(item)" name="edit" />
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { songSheetList, delSongSheet } from '@/api/songSheet.js'
import { addLike } from '@/api/songLink.js'
export default {
name:'Songsheet',
data(){
    return {
        list:[],
        selectAll:false,
        manage:false,
        oldLinkId:undefined,
    }
},
created(){
    this.getList();
},
methods:{
    getList(){
        songSheetList().then(res=>{
            if(res.code == 200){
                res.data.list.forEach(current => {
                    current.isSelect = false;
                })
                this.list = res.data.list;
            }
        })
    },
    del(item){
        delSongSheet({
            id : item.songSheetId
        }).then(res=>{
            if(res.code == 200){
                this.$toast.success('删除成功!');
                this.getList();
            }
        })
    },
    edit(item){
        this.$router.push({
            path:"/createSongSheet",
            query : {
                songSheetId : item.songSheetId,
                name : item.name
            }
        })
    },
    sontDetail(item){
        this.$router.push({
            path:"/like",
            query : {
                type : 'song_sheet',
                title : item.name,
                link : item.songSheetId
            }
        })
    },
    SelectOne(item){
        item.isSelect = !item.isSelect;
        let all = true;
        this.list.forEach(current => {
            if(!current.isSelect){
                all = false;
            }
        })
        this.selectAll = all;
    },
    SelectAll(){
        this.list.forEach(current=>{
            current.isSelect = this.selectAll;
        })
    },
    jump(item){
        if(this.$route.query.rid){
            return this.addSong(item.songSheetId);
        }
        if(this.manage){
            this.SelectOne(item);
        }else{
            this.sontDetail(item);
        }
    },
    addSong(songSheetId){
        addLike({
            rid : this.$route.query.rid,
            link : songSheetId,
            type : 'song_sheet',
            oldLinkId : this.$route.query.oldId?this.$route.query.oldId:undefined
        }).then(res=>{
            if(res.code==200){
                this.$toast.success('添加成功!')
                this.$router.isBack = true
                this.$router.back(-1);
            }
        })
    }
}
}
</script>

<style lang="less" scoped>
.songSheet{
    width: 100%;
    .songTop{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        height: 50px;
        background: white;
        border-radius: 5px;
        width: calc(~"100% - 10px");
        margin: 5px auto;
        box-sizing: border-box;
        padding:0px 5px;
        .sel{
            position: absolute;
            left: 0px;
            top: 0px;
            height: 100%;
            display: flex;
            align-items: center;
            margin-left: 5px;
        }
        .btns{
            display: flex;
            height: 100%;
            align-items: center;
            .btn{
                margin-right: 10px;
            }
        }
    }
    .songList{
        display: flex;
        flex-wrap: wrap;
        padding: 10px 5px;
        .item{
            position: relative;
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            /deep/.checkbox{
                position: absolute;
                top: 5px;
                left: 5px;
                z-index: 1;
                border:1px solid rgba(0,0,0,0.2);
                border-radius: 50%;
            }
            img{
               position: absolute;
               left: 0px;
               top: 0px;
               width: 100%;
            }
            .content{
                position: absolute;
                bottom: 0px;
                left: 0px;
                height: 50px;
                width: 100%;
                background: rgba(0,0,0,.5);
                z-index: 10;
                display: flex;
                flex-wrap: wrap;
                &>div{
                    width: 30%;
                }
                .left{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    width: 70%;
                    overflow: hidden;
                    padding: 0px 10px;
                    box-sizing: border-box;
                    height: 100%;
                    div{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: white;
                        &:nth-child(1){
                            font-size: 16px;
                        }
                    }
                }
                .right{
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    width: 30%;
                    i{
                        color: rgba(255,255,255,.8);
                        font-size: 20px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
</style>